<template>
    <div>
        <h2>修改门店</h2>
        
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>门店名称</td>
                    <td>{{a.ShopName}}</td>
                </tr>
                <tr>
                    <td>分店名称</td>
                    <td>{{a.BranchName}}</td>
                </tr>
                <tr>
                    <td>门店图片</td>
                    <td>
                        <img :src="a.Phote" width="200" v-if="a.Phote != ''">
                    </td>
                </tr>
                <tr>
                    <td>开业时间</td>
                    <td>{{a.BeginTime}}</td>
                </tr>
                <tr>
                    <td>门店状态</td>
                    <td>{{a.State==1?"启用":"禁用"}}
                    </td>
                </tr>
                <tr>
                    <td>门店特色</td>
                    <td>{{a.Feature}}
                    </td>
                </tr>
                <tr>
                    <td>门店介绍</td>
                    <td>{{a.Desc}}</td>
                </tr>
                <tr>
                    <td>门店位置</td>
                    <td>{{a.AddressId}}</td>
                </tr>
                <tr>

                    <td>门店类型</td>
                    <td>
                        <span v-if="a.ShopType == 1">普通酒店</span>
                        <span v-if="a.ShopType == 2">三星酒店</span>
                        <span v-if="a.ShopType == 3">五星级酒店</span>
                        <span v-if="a.ShopType == 4">电竞酒店</span>
                        <span v-if="a.ShopType == 5">商务酒店</span>
                        <span v-if="a.ShopType == 6">民宿</span>
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import moment from 'moment';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();


onMounted(() => {
    FanTian();
    getShopAddress();
})


let a: any = reactive({
    Id: route.query.Id,
    ShopName: '',
    BranchName: '',
    Phote: '',
    BeginTime: '',
    State: 1,
    Feature: [],
    Desc: '',
    AddressId: '',
    ShopType: ''
})

let data: any = reactive({
    list: [],
})
let addressname:any=ref([])

const FanTian: any = () => {
    axios({
        method: 'get',
        url: '/api/Shop/FanTian',
        params: { id: route.query.id }
    })
        .then((res) => {
            console.log(res)
            a.ShopName=res.data.ShopName,
            a.BranchName=res.data.BranchName,
            a.Phote=res.data.Phote,
            a.BeginTime=res.data.BeginTime.substring(0, 10),
            a.State=res.data.State,
            a.Feature=res.data.Feature,
            a.Desc=res.data.Desc,
            a.AddressId=res.data.AddressId,
            a.ShopType=res.data.ShopType
            //根据地址id得名字
             addressname.value=data.list.find((item:any)=>{
                if(item.Id=a.AddressId)
                {
                    return item;
                }
            }).Name
        })
        .catch((err) => {
            console.log(err);
        })
}




const getShopAddress = () => {
    axios({
        url: "/api/Shop/GetShopAddressList",
        method: 'get'
    })
        .then((res) => {
            console.log(res)
            data.list = res.data
        })
}


const imgs = (e: any) => {
    let obj = e.target.files[0];
    let f = new FormData();
    f.append("file", obj);
    axios({
        url: '/api/Img',
        method: 'post',
        data: f
    })
        .then((res) => {
            console.log(res)
            a.Phote = res.data

        })
        .catch((err) => {
            console.log(err);
        })
}

</script>

<style scoped></style>